<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>卢声扬</title>
    <link rel="icon" href="lushengyang.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="font-icon/iconfont.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
    <!--页头-->
    <div class="header">
        <!--导航条-->
        <div class="container">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-bar-little">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">简历</a>
                    </div>
                    <div class="collapse navbar-collapse" id="nav-bar-little">
                        <ul class="nav navbar-nav">
                            <li><a href="#summary">简介</a></li>
                            <li><a href="#about">关于</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">作品 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#works-tab" data-target="works-tab-1">表单实例</a></li>
                                    <li><a href="#works-tab" data-target="works-tab-2">图片展示</a></li>
                                    <li><a href="#works-tab" data-target="works-tab-3">jQuery</a></li>
                                    <li><a href="#works-tab" data-target="works-tab-4">CSS3</a></li>
                                </ul>
                            </li>
                            <li><a href="#contact">联系</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="header-banner-info text-center" id="summary">
            <img src="img/icon.png" id="rotate">
            <h1>卢声扬 <small style="color: #ffffff;">求职意向：前端工程师</small></h1>
            <p style="margin-top: 20px">毕业于河南科技大学，无机非金属材料专业</p>
            <ul class="social-icons">
                <li title="github主页">
                    <a href="https://github.com/lushengyang/practices" target="_blank">
                        <i class="iconfont icon-github"></i>
                    </a>
                </li>
                <li title="CSDN主页">
                    <a href="http://blog.csdn.net/qq_39225382" target="_blank">
                        <i class="iconfont icon-csdn"></i>
                    </a>
                </li>
                <li title="下载简历">
                    <a href="file/卢声扬-前端工程师.pdf" target="_blank">
                        <i class="iconfont icon-wenjian"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--内容-->
    <div class="content-section">
        <div class="about-section" id="about">
            <div class="container">
                <div class="about-header text-center">
                    <h3>关于我 <small>你想了解我么？</small></h3>
                </div>
                <div class="about-content">
                    <div class="col-md-4 about-content-1">
                        <h3>基本信息</h3>
                        <p>姓名：卢声扬</p>
                        <p>年龄：22岁</p>
                        <p>毕业学校：河南科技大学</p>
                        <p>专业：无机非金属材料工程</p>
                        <p>家庭住址：郑州市高新区</p>
                        <ul class="social-icons">
                            <li title="github主页">
                                <a href="https://github.com/lushengyang/practices" target="_blank">
                                    <i class="iconfont icon-github"></i>
                                </a>
                            </li>
                            <li title="CSDN主页">
                                <a href="http://blog.csdn.net/qq_39225382" target="_blank">
                                    <i class="iconfont icon-csdn"></i>
                                </a>
                            </li>
                            <li title="下载简历">
                                <a href="file/Resume.pdf" target="_blank">
                                    <i class="iconfont icon-wenjian"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4 about-content-2">
                        <img src="img/me.png" alt="照片">
                    </div>
                    <div class="col-md-4 about-content-3">
                        <h3>编码语言/框架</h3>
                        <ul class="language clearfix">
                            <li class="col-md-5"><span>HTML/HTML5</span></li>
                            <li class="col-md-2"></li>
                            <li class="col-md-5"><span>CSS/CSS3</span></li>
                        </ul>
                        <ul class="language clearfix">
                            <li class="col-md-5"><span>JavaScript</span></li>
                            <li class="col-md-2"></li>
                            <li class="col-md-5"><span>jQuery</span></li>
                        </ul>
                        <ul class="language clearfix">
                            <li class="col-md-5"><span>Bootstrap</span></li>
                            <li class="col-md-2"></li>
                            <li class="col-md-5"><span>Angularjs</span></li>
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <h3>能力专长</h3>
                        <p>1.熟悉html/css，能够兼容主流的各种浏览器，如ie6-10/chrome/firefox/opera。</p>
                        <p>2.熟悉js，ajax等，能够编写基本的js原生代码。</p>
                        <p>3.熟悉jQuery api，能够使用jQ编写最基本的动态交互效果。</p>
                        <p>4.了解git版本控制工具。</p>
                        <p>5.能够熟练使用chrome调试工作调试代码。</p>
                        <p>6.能够熟练使用photoshop，webstorm，Dreamweaver等工具进行前端页面手工式的开发。</p>
                        <p>7.下一步准备关注移动端的css3，html5，nodejs等。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="works-section" id="works">
            <div class="container">
                <div class="works-header text-center">
                    <h3>作品展示 <small>最近的作品</small></h3>
                </div>
                <div class="works-content">
                    <div>
                        <ul class="nav nav-tabs" role="tablist" id="works-tab">
                            <li role="presentation" class="active"><a href="#works-tab-1" aria-controls="works-tab-1" role="tab" data-toggle="tab">表单常用</a></li>
                            <li role="presentation"><a href="#works-tab-2" aria-controls="works-tab-2" role="tab" data-toggle="tab">图片展示</a></li>
                            <li role="presentation"><a href="#works-tab-3" aria-controls="works-tab-3" role="tab" data-toggle="tab">jQuery</a></li>
                            <li role="presentation"><a href="#works-tab-4" aria-controls="works-tab-4" role="tab" data-toggle="tab">CSS3</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="works-tab-1">
                                <h4 class="text-center">表单实例</h4>
                                <ul>
                                    <li><a href="../b/将单词首字母大写.html" target="_blank">①单词的首字母大写</a></li>
                                    <li><a href="../b/敏感词转换.html" target="_blank">②屏蔽敏感词</a></li>
                                    <li><a href="../b/提示输入框可输入剩余字数.html" target="_blank">③提示输入框可输入剩余字数</a></li>
                                    <li><a href="../b/正则验证用户输入格式.html" target="_blank">④验证用户输入的格式是否正确</a></li>
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="works-tab-2">
                                <h4 class="text-center">图片展示</h4>
                                <ul>
                                    <li><a href="../c/01/index.html" target="_blank">①360度图片展示</a></li>
                                    <li><a href="../c/02/index.html" target="_blank">②图片翻页切换</a></li>
                                    <li><a href="../c/03/index.html" target="_blank">③整个翻页</a></li>
                                    <li><a href="../c/04/index.html" target="_blank">④单个翻页</a></li>
                                    <li><a href="../c/05/index.html" target="_blank">⑤淡入淡出切换</a></li>
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="works-tab-3">
                                <h4 class="text-center">jQuery</h4>
                                <ul>
                                    <li><a href="../d/01/index.html" target="_blank">①动画版数字时钟</a></li>
                                    <li><a href="../d/02/index.html" target="_blank">②3种弹窗</a></li>
                                    <li><a href="../d/03/index.html" target="_blank">③放大镜</a></li>
                                    <li><a href="../d/04/index.html" target="_blank">④百度文库评分</a></li>
                                    <li><a href="../d/05/index.html" target="_blank">⑤模拟window桌面右键菜单</a></li>
                                    <li><a href="../d/06/index.html" target="_blank">⑥广告随机移动</a></li>
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="works-tab-4">
                                <h4 class="text-center">CSS3</h4>
                                <ul>
                                    <li><a href="../a/css3Clock.html" target="_blank">①CSS3圆盘时钟</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--页尾-->
    <footer class="contact" id="contact">
        <div class="container text-center">
            <h3>联系我 <small>Please contact me</small></h3>
            <div class="contact-info col-md-12">
                <ul class="social-icons">
                    <li title="手机号码">
                        <span><i class="glyphicon glyphicon-earphone"></i> 18848965187</span>
                    </li>
                    <li title="QQ">
                        <span><i class="iconfont icon-shejiao-QQ"></i> 1758608271</span>
                    </li>
                    <li title="微信">
                        <span><i class="iconfont icon-shejiao"></i> lushengyang</span>
                    </li>
                </ul>
                <div class="QR-code col-md-12">
                    <div class="QQ">
                        <img src="img/QQ.jpg" alt="QQ">
                    </div>
                    <div class="WX">
                        <img src="img/wx.jpg" alt="WX">
                    </div>
                </div>
            </div>
        </div>
    </footer>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
//    图标旋转
//    toMove();
   function toMove () {
       var num = 0 ;
        setInterval(function () {
            if (num>=720){
                num=0;
            }
            num+=6;
            $('#rotate').css({'transform':'rotate('+num+'deg)'});
        },30)
    }
//    作品展示文字特效
    $('#works .tab-content li').find('a').on('mouseover',function () {
        $(this).addClass('animated pulse');
    }).on('mouseout',function () {
        $(this).removeClass('animated pulse');
    })
//    导航栏定位
    $('#nav-bar-little .dropdown-menu a').click(function (e) {
        var href = $(this).attr('href');
        var tabId = $(this).attr('data-target');
        console.log(href);
        if ('#'!== href){
            e.preventDefault();
            $(document).scrollTop($(href).offset().top - 70);
            if (tabId){
                $('#works-tab a[href="#'+tabId+'"]').tab('show');
            }
        }
    })
</script>
</body>
</html>